<template>
    <div class="box">
       <header>
         <i @click="back" class="iconfont">&#xe663;</i>
         <p>评价</p>
         <button @click="submit" :class="{yanse:man}">提交</button>
     </header>
     <div class="warp">
          <van-notice-bar color="#f60" background="#fff7cc" wrapable left-icon="info-o">
        技术是开发它的人的共同灵魂。外卖评价功能上线，本地上传，更有一键美化，种草力满分
        </van-notice-bar>
     
     </div>
    <section>
         <div class="top">
             <p >您对骑手满意吗？</p>
             <p style="font-size:12px;color:gray">{{dingDan.pei_people.name}}</p>
         </div>
         <dl>
             <em>
                 <i class="iconfont" style="font-size:20px;color:blue;">&#xe6c0;</i>
             </em>
             <em>
                 送达时间
             </em>
             <em style="color:orange">
                 {{dingDan.time}}左右送达
             </em>
         </dl>
         <dl>
             <div @click="buMan($event)" :class="{bei:(this.manyi==0?true:false)}">
                  <i class="iconfont" :class="{lian:(this.manyi==0?true:false)}" style="font-size:20px;">&#xe600;</i>
                 <p>不满意</p>
                 
             </div>
             <div @click="manzu($event)" :class="{bei:(this.manyi==1?true:false)}">
                  <i class="iconfont" :class="{lian:(this.manyi==1?true:false)}" style="font-size:20px;">&#xe607;</i>
                 <p>满意</p>
             </div>
         </dl>
     </section>
     <section>
         <div class="top">
             <p >您对商家/菜品满意吗？</p>
             <!-- <p style="font-size:12px;color:gray">{{dingDan.pei_people.name}}</p> -->
         </div>
         <div style="margin:2vw 0;display:flex; align-items: center;">
             <img :src="$image+shop.shop_img" style="width:12vw; border-radius:5px;height:12vw;" alt="">
            <p style="margin-left:2vw">{{shop.name}}</p>
         </div>
         <div style="display:flex;align-items: center;margin:2vw 0;">
              <p style="margin-right:1vw">总体</p>
             <van-rate
                v-model="value"
                :size="24"
                color="#ffd21e"
                void-icon="star"
                void-color="#eee"
                />
         </div>
         <div class="pingJia" style="">
             <div class="bianJ" 
             @focus="huoJ($event)"
             @blur="shiJ($event)"
              ref="pingJia"  
              contenteditable="true">
                 {{content}}
             </div>
             <div class="shangC">
                <!-- <i class="iconfont" style="font-size:20px;color:gray;">&#xe664;</i> -->
                <van-uploader v-model="fileList"
                  multiple 
                  capture="camera"
                  :before-read="beforeRead"
                  :after-read="afterRead"
                  :delete="Delete"
                  />
              </div>
         </div>
     </section>
    </div>
</template>

<script>
import {mapState} from 'vuex'
import {Toast} from 'vant'
import {ajax_pingImg,ajax_pingJia} from '../ajax/index'
export default {
    name: '',
    data(){
        return{
           dingDan:{},
           value:0,
           content:'口味赞，包装好，推荐给大家',
           fileList: [
               
            ],
            imgArr:[],
            manyi:0,
            imageArr:[],
        }
    },
    methods:{
        back(){
            this.$router.push("/dinDan")
        },
        beforeRead(file){
            console.log(file)
            if(file.type!=='image/jpeg'){
                Toast("请上传jpg格式图片")
                return false;
            }
            this.imgArr.push(file.name)
            return true;  
        },
       
            afterRead(file){
                console.log(file)
                this.imageArr=file.file;
        //        
            },
         Delete(){
            this.imageArr.pop();
        },
        submit(){
            ajax_pingJia({
               content:this.content,
               ping_img:JSON.stringify(this.imgArr),
               user_id:this.users.Id,
               food_id:this.pingJia.food_id,
               ding_Id:this.pingJia.Id,
               star:this.value,
               pei_Id:this.pingJia.pei_people.Id,
               manyi:this.manyi
            }).then(res=>{
               console.log(res)
               alert(res.msg)
               if(res.code==1){
                   alert(res.msg);
                   this.$router.push('/dingDan')
               }
            })
        },
       
        huoJ(e){
            console.log(e.target)
             e.target.textContent=''
             console.log(this.content)
        },
        shiJ(e){   
            console.log(e.target.textContent)
            this.content=e.target.textContent;
        },
        manzu(e){
            this.manyi=1;
        },
        buMan(e){
           this.manyi=0;
        }
    },
    watch:{
       imageArr(news,old){
           console.log(news,old)
            var formData = new FormData();
           formData.append("file",news);
            ajax_pingImg(formData).then(res=>{
                console.log(res)
            })

       }
    },
    computed:{
       ...mapState(['pingJia','shop','users']),
       man(){
           if(this.value&&this.content&&this.imgArr&&this.manyi){
               return true;
           }else{
               return false;
           }
       },
       
    },
    created(){
        // console.log(this.$route.params.data)
        // this.dingDan=this.$route.params.data;
        // console.log(this.$route.params.data)
        if(this.$route.params.data){
            this.$store.commit("setPingJia",this.$route.params.data)
        }
        
       this.dingDan=this.pingJia;
    //    console.log(this.$refs.pingJia)
    //    console.log(this.dingDan)
        
    },
   
     updated(){
            // console.log("gang")
            // console.log(this.fileList)
            // console.log(this.imgArr)
    },
    mounted(){
        //  console.log(this.$refs.pingJia)
        //  this.$refs.pingJia.textContent='口味赞，包装好，推荐给大家'
    },
    // beforeRouteUpdate (to, from, next) {
        
    //     console.log(to,from)
    // }
}
</script>

<style scoped>
.yanse{
    background-color: rgb(235, 196, 26);
    color: black;
}
.bei{
    background-color: rgba(245, 239, 153,.5);
    color: coral;
}
.lian{
    color: rgb(255, 187, 0);
}
.bianJ{
    font-family: '楷体';
    font-size: 13px;
    color: gray;
     width: 98%;
    /* padding:2vw; */
    height: 24vh;
    margin:0vw auto;
    background-color: #f6f6f6;
    border-radius: 5px;
    border: 0;
}
.pingJia{
    position: relative;
    width: 94%;
    padding:2vw;
    height: 24vh;
    margin:2vw auto;
    background-color: #f6f6f6;
    border-radius: 5px;
}
.shangC{
    position: absolute;
    bottom:3vw;
    left:2.5vw;
    width: 15vw;
    height: 15vw;
    display: flex;
    text-align: center;
    line-height: 15vw;
    border: 1px dashed gray;
    border-radius: 5px;
}
.shangC >>> .van-uploader__wrapper{
    flex-wrap: nowrap;
}
.shangC >>> .van-uploader__wrapper>div{
    width: 15vw;
    height: 15vw;
     border: 1px dotted gray;
     border-radius: 3px;
}
.shangC >>> .van-image__img{
  width: 15vw;
  height: 15vw;
}
.shangC >>> .van-uploader__preview-image{
    width: 15vw;
    height: 15vw;
}
.shangC >>> .van-image__error{
    width: 15vw;
    height: 15vw;
}
.box{
    height: 100vh;
    background-color: #f5f5f5;
    position:relative;
    z-index: 1000;
}
.warp{
    margin-top:1.5vw;
}
.warp >>> .van-notice-bar__content{
    font-size: 10px;
    height: 3.8vh;
    line-height: 2vh;
}
header{
    position: relative;
    width: 94vw;
    padding: 3vw;
    text-align: center;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    background-image: linear-gradient(to right top,rgba(228, 100, 26, 0.884),rgba(174, 0, 255, 0.575),rgba(4, 0, 255, 0.747));
}
header>button{
  /* position: absolute;
  left: 5vw; */
  padding: 1vw 2vw;
  font-size: 10px;
  border-radius: 5px;
  background-color: #ccc;
  /* color: black; */
}
section{
    width: 92vw;
    padding: 2vw;
    margin:2vw auto;
    background-color: white;
    border-radius: 5px;
}
section>.top{
    width:100%;
    display:flex;
    justify-content: space-between;
    padding: 1.8vw 0;
    border-bottom: 1px solid #eee;
}
.top>p{
    font-weight: bold;
    font-family: "方正小体";
}
section>dl{
    display:flex;
    justify-content: space-between;
    align-items: center;
    margin: 1vw 0;

}
dl>div{
    width: 49%;
    text-align: center;
    line-height: 5vh;
    display: flex;
    justify-content: center;
    align-items: center;
     background-color: #f5f5f5;
    border-radius: 5px;
}
dl i{
    color: gray;
}
dl>em{
    color: gray;
    font-size: 12px;
    margin-left: 1vw;
}
</style>